﻿<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ProClinic-医院管理系统Bootstrap4前端框架</title>
	<!-- Fav  Icon Link -->
	<link rel="shortcut icon" type="image/png" href="images/fav.png">
	<!-- Bootstrap core CSS -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<!-- themify icons CSS -->
	<link rel="stylesheet" href="css/themify-icons.css">
	<!-- Animations CSS -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Main CSS -->
	<link rel="stylesheet" href="css/styles.css">
	<link rel="stylesheet" href="css/green.css" id="style_theme">
	<link rel="stylesheet" href="css/responsive.css">

	<script src="js/modernizr.min.js"></script>
</head>

<body>
	<!-- Pre Loader -->
	<div class="loading">
		<div class="spinner">
			<div class="double-bounce1"></div>
			<div class="double-bounce2"></div>
		</div>
	</div>
	<!--/Pre Loader -->
	<!-- Color Changer -->
	<div class="theme-settings" id="switcher">
		<span class="theme-click">
			<span class="ti-settings"></span>
		</span>
		<span class="theme-color theme-default theme-active" data-color="green"></span>
		<span class="theme-color theme-blue" data-color="blue"></span>
		<span class="theme-color theme-red" data-color="red"></span>
		<span class="theme-color theme-violet" data-color="violet"></span>
		<span class="theme-color theme-yellow" data-color="yellow"></span>
	</div>
	<!-- /Color Changer -->
	<div class="wrapper">
		<!-- Page Content -->
		<div id="content">
				<!-- Top Navigation -->
				<div class="container top-brand">
					<nav class="navbar navbar-default">			
						<div class="navbar-header">
							<div class="sidebar-header"> <a href="index.html"><img src="images/logo-dark.png" class="logo" alt="logo"></a>
							</div>
						</div>
						<ul class="nav justify-content-end">
							<li class="nav-item">
								<a class="nav-link">
									<span title="Fullscreen" class="ti-fullscreen fullscreen"></span>
								</a>							
							</li>
							<li class="nav-item">
								<a class="nav-link" data-toggle="modal" data-target=".lochana-modal-lg">
									<span class="ti-search"></span>
								</a>
								<div class="modal fade lochana-modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
									<div class="modal-dialog modal-lorvens">
										<div class="modal-content lochana-box-shadow2">
											<div class="modal-header">
												<h5 class="modal-title">Search Patient/医生:</h5>
												<span class="ti-close" data-dismiss="modal" aria-label="Close">
												</span>
											</div>
											<div class="modal-body">
												<form>
													<div class="form-group">
														<input type="text" class="form-control" id="search-term" placeholder="Type text here">
														<button type="button" class="btn btn-lorvens lochana-bg">
															<span class="ti-location-arrow"></span> Search</button>
													</div>
												</form>
											</div>
										</div>
									</div>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
								 aria-expanded="false">
									<span class="ti-announcement"></span>
								</a>
								<div class="dropdown-menu lochana-box-shadow2 notifications animated flipInY">
									<h5>Notifications</h5>
									<a class="dropdown-item" href="#">
										<span class="ti-wheelchair"></span> New Patient Added</a>
									<a class="dropdown-item" href="#">
										<span class="ti-money"></span> Patient payment done</a>
									<a class="dropdown-item" href="#">
										<span class="ti-time"></span>Patient Appointment booked</a>
									<a class="dropdown-item" href="#">
										<span class="ti-wheelchair"></span> New Patient Added</a>
								</div>
							</li>
							<li class="nav-item">
								<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
								 aria-expanded="false">
									<span class="ti-user"></span>
								</a>
								<div class="dropdown-menu lochana-box-shadow2 profile animated flipInY">
									<h5>John Willing</h5>
									<a class="dropdown-item" href="#">
										<span class="ti-settings"></span> Settings</a>
									<a class="dropdown-item" href="#">
										<span class="ti-help-alt"></span> Help</a>
									<a class="dropdown-item" href="#">
										<span class="ti-power-off"></span> Logout</a>
								</div>
							</li>
						</ul>
				
					</nav>
				</div>
				<!-- /Top Navigation -->
				<!-- Menu -->
				<div class="container menu-nav">
					<nav class="navbar navbar-expand-lg lochana-bg text-white">
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
						 aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
							<span class="ti-menu text-white"></span>
						</button>
				
						<div class="collapse navbar-collapse" id="navbarSupportedContent">
							<ul class="navbar-nav mr-auto">
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-home"></span> 控制面板</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="index.html">默认</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-wheelchair"></span> 病人管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-patient.html">添加病人信息</a>
										<a class="dropdown-item" href="patients.html">查看病人信息</a>
										<a class="dropdown-item" href="about-patient.html">病人详情</a>
										<a class="dropdown-item" href="edit-patient.html">编辑病人信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-user"></span> 医生管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-doctor.html">添加医生信息</a>
										<a class="dropdown-item" href="doctors.html">查询医生信息</a>
										<a class="dropdown-item" href="about-doctor.html">医生信息详情</a>
										<a class="dropdown-item" href="edit-doctor.html">编辑医生信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-pencil-alt"></span> 出诊管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-appointment.html">添加出诊信息</a>
										<a class="dropdown-item" href="appointments.html">查询出诊信息</a>
										<a class="dropdown-item" href="about-appointment.html">出诊信息详情</a>
										<a class="dropdown-item" href="edit-appointment.html">编辑出诊信息</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-money"></span> 支付管理</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-payment.html">添加支付</a>
										<a class="dropdown-item" href="payments.html">所有支付</a>
										<a class="dropdown-item" href="about-payment.html">发票</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-key"></span> 病房分配</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="add-room.html">添加病房</a>
										<a class="dropdown-item" href="rooms.html">查询病房</a>
										<a class="dropdown-item" href="edit-room.html">编辑病房信息</a>
									</div>
								</li>
								<li class="nav-item dropdown active">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-layout-tab"></span> UI框架</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="typography.html">排版</a>
										<a class="dropdown-item" href="buttons.html">按钮</a>
										<a class="dropdown-item" href="cards.html">卡片</a>
										<a class="dropdown-item" href="tabs.html">选项卡</a>
										<a class="dropdown-item" href="accordions.html">手风琴</a>
										<a class="dropdown-item" href="modals.html">模态窗口</a>
										<a class="dropdown-item" href="lists.html">媒体和列表</a>
										<a class="dropdown-item" href="grid.html">网格</a>
										<a class="dropdown-item" href="progress-bars.html">进度条</a>
										<a class="dropdown-item" href="notifications-alerts.html">预警和提示</a>
										<a class="dropdown-item" href="pagination.html">分页</a>
										<a class="dropdown-item" href="carousel.html">滑块</a>
										<a class="dropdown-item" href="tables.html">表格</a>
										<a class="dropdown-item" href="charts-1.html">Morris图表</a>
										<a class="dropdown-item" href="charts-2.html">Flot图表</a>
										<a class="dropdown-item" href="map-1.html">谷歌地图</a>
										<a class="dropdown-item" href="map-2.html">Vector地图</a>
										<a class="dropdown-item" href="forms.html">表单</a>
										<a class="dropdown-item" href="font-awesome.html">Font Awesome </a>
										<a class="dropdown-item" href="themify.html">Themify图标</a>
									</div>
								</li>
								<li class="nav-item dropdown">
									<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
									 aria-expanded="false"><span class="ti-file"></span> 其它页面</a>
									<div class="dropdown-menu">
										<a class="dropdown-item" href="login.html">登录</a>
										<a class="dropdown-item" href="sign-up.html">注册</a>
										<a class="dropdown-item" href="404.html">404</a>
										<a class="dropdown-item" href="blank-page.html">空白页</a>
										<a class="dropdown-item" href="pricing.html">价格表</a>
										<a class="dropdown-item" href="faq.html">FAQ</a>
										<a class="dropdown-item" href="invoice.html">发票</a>
									</div>
								</li>
							</ul>
						</div>
					</nav>
				</div>
				<!-- /Menu -->
				<!-- Breadcrumb -->
				<!-- Page Title -->
				<div class="container mt-0">
					<div class="row breadcrumb-bar">
						<div class="col-md-6">
							<h3 class="block-title">Lists</h3>
						</div>
						<div class="col-md-6">
							<ol class="breadcrumb">
								<li class="breadcrumb-item">
									<a href="index.html">
										<span class="ti-home"></span>
									</a>
								</li>
								<li class="breadcrumb-item">UI Kit</li>
								<li class="breadcrumb-item active">Lists</li>
							</ol>
						</div>
					</div>
				</div>
			<!-- /Breadcrumb -->
			<!-- Main Content -->
			<div class="container">
				<div class="row">
					<div class="col-md-12">
						<div class="widget-area-2 lochana-box-shadow">
							<!-- List Item -->
							<h3 class="widget-title">Un Ordered List</h3>	
							<p class="margin-l20">Un ordered list. Add <code>&lt;ul&gt;</code></p>	
							<div class="bd-example">		
								<ul>
									<li>Lorem ipsum dolor sit amet</li>
									<li>Consectetur adipiscing elit</li>
									<li>Integer molestie lorem at massa</li>
									<li>Facilisis in pretium nisl aliquet</li>
									<li>Nulla volutpat aliquam velit
										<ul>
											<li>Phasellus iaculis neque</li>
											<li>Purus sodales ultricies</li>
											<li>Vestibulum laoreet porttitor sem</li>
											<li>Ac tristique libero volutpat at</li>
										</ul>
									</li>
									<li>Faucibus porta lacus fringilla vel</li>
									<li>Aenean sit amet erat nunc</li>
									<li>Eget porttitor lorem</li>
								</ul>
							</div>
							<!-- /List Item -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- List Item -->
							<h3 class="widget-title">Ordered List</h3>
							<p class="margin-l20">Un ordered list. Add <code>&lt;ol&gt;</code></p>	
							<div class="bd-example">
								<ol>
									<li>Lorem ipsum dolor sit amet</li>
									<li>Consectetur adipiscing elit</li>
									<li>Integer molestie lorem at massa</li>
									<li>Facilisis in pretium nisl aliquet</li>
									<li>Nulla volutpat aliquam velit</li>
									<li>Faucibus porta lacus fringilla vel</li>
									<li>Aenean sit amet erat nunc</li>
									<li>Eget porttitor lorem</li>
								</ol>
		
							</div>
							<!-- /List Item -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- List Item -->
							<h3 class="widget-title">Media List</h3>
							<p class="margin-l20">Media list. Add <code>class="media"</code> to element.</p>			
							<div class="lochana-widget">
								<ul class="list-unstyled">
									<li class="media">
										<img class="mr-3" src="images/user1.png" alt="Generic placeholder image">
										<div class="media-body">
											<h5 class="mt-0 mb-1">List-based media object</h5>
											Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
											vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
											in faucibus.
										</div>
									</li>
									<li class="media my-4">
										<img class="mr-3" src="images/user2.png" alt="Generic placeholder image">
										<div class="media-body">
											<h5 class="mt-0 mb-1">List-based media object</h5>
											Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
											vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
											in faucibus.
										</div>
									</li>
									<li class="media">
										<img class="mr-3" src="images/user3.png" alt="Generic placeholder image">
										<div class="media-body">
											<h5 class="mt-0 mb-1">List-based media object</h5>
											Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
											vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
											in faucibus.
										</div>
									</li>
								</ul>
							</div>
							<!-- /List Item -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- List Item -->		
							<h3 class="widget-title">Nesting</h3>
							<p class="margin-l20">Nesting Media list. Add <code>class="media"</code> inside element, which is having <code>media</code> class.</p>
							<div class="lochana-widget">
								<div class="media">
									<img class="mr-3" src="images/user2.png" alt="Generic placeholder image">
									<div class="media-body">
										<h5 class="mt-0">Media heading</h5>
										Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
										vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
										in faucibus.
		
										<div class="media mt-3">
											<a class="pr-3" href="#">
												<img src="images/user3.png" alt="Generic placeholder image">
											</a>
											<div class="media-body">
												<h5 class="mt-0">Media heading</h5>
												Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in
												vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis
												in faucibus.
											</div>
										</div>
									</div>
								</div>
							</div>
							<!-- /List Item -->
							</div>
							<div class="widget-area-2 lochana-box-shadow">
							<!-- List Item -->		
							<h3 class="widget-title">Alignment</h3>
							<p class="margin-l20">Media list alignment. Add <code>.align-self-start/.align-self-center/.align-self-end</code> to image.</p>
							<div class="lochana-widget mb-3">
								<div class="media">
									<img class="align-self-start mr-3" src="images/user1.png" alt="Generic placeholder image">
									<div class="media-body">
										<h5 class="mt-0">Top-aligned media</h5>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum
											in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
											felis in faucibus.
										</p>
										<p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
											dis parturient montes, nascetur ridiculus mus.</p>
									</div>
									<!-- /.col-sm-9 -->
								</div>
		
								<div class="media">
									<img class="align-self-center mr-3" src="images/user2.png" alt="Generic placeholder image">
									<div class="media-body">
										<h5 class="mt-0">Center-aligned media</h5>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum
											in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
											felis in faucibus.
										</p>
										<p class="mt-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
											dis parturient montes, nascetur ridiculus mus.</p>
									</div>
									<!-- /.col-sm-9 -->
								</div>
		
		
								<div class="media">
									<img class="align-self-end mr-3" src="images/user3.png" alt="Generic placeholder image">
									<div class="media-body">
										<h5 class="mt-0">Bottom-aligned media</h5>
										<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum
											in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue
											felis in faucibus.
										</p>
										<p class="mt-0 mb-0">Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis
											dis parturient montes, nascetur ridiculus mus.</p>
									</div>
									<!-- /.col-sm-10 -->
								</div>
							</div>
							<!-- /List Item -->
						</div>
					</div>		
				</div>
			</div>
			<!-- /Main Content -->
			<!--Copy Rights-->
			<div class="container">
				<div class="d-sm-flex justify-content-center">
				  <span class="text-muted text-center d-block d-sm-inline-block">Copyright © 2020. All rights reserved.</span>
				</div>
			</div>
			<!-- /Copy Rights-->
		</div>
	<!-- Page Content -->
	</div>
	<!-- Back to Top -->
	<a id="back-to-top" href="#" class="back-to-top">
			<span class="ti-angle-up"></span>
	</a>
	<!-- /Back to Top -->
	<!-- Jquery Library-->
	<script src="js/jquery-3.2.1.min.js"></script>
	<!-- Popper Library-->
	<script src="js/popper.min.js"></script>
	<!-- Bootstrap Library-->
	<script src="js/bootstrap.min.js"></script>
	<!-- Custom Script-->
	<script src="js/custom.js"></script>
</body>

</html>